<template>
	<view class="canvas-box" :style="'background-color:' + bgColor">
		<view class="canvas-in">
			<canvas :style="{width:widthIn+'px', height:heightIn+'px'}" canvas-id="graceCanvas" class="grace-canvas"></canvas>
			<view class="grace-canvas-img" :style="{width:widthIn+'px', height:heightIn+'px'}" v-if="imgSrc != null">
				<image :src="imgSrc" mode="widthFix" style="width:100%;" @longpress="longpress"></image>
			</view>
		</view>



	</view>
</template>
<script>
	import QR from "./js_sdk/wxqrcode.js" // 二维码生成器	
	//base64格式图片转正常格式图片的js文件canvas不能绘制base64格式图片如果有需要转换
	import {
		pathToBase64,
		base64ToPath
	} from './js_sdk/gsq-image-tools/image-tools/index.js'

	export default {
		data() {
			return {
				width: 750, // 画布宽度，单位 rpx
				height: 1150, // 画布高度
				widthIn: 300, // 自动计算转换为 px
				heightIn: 500, // 自动计算转换为 px
				bgColor: '#cbeed4', // 背景颜色
				//海报顶部图片
				bgImg: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1600345737120&di=09ccda467ef09b25979ba78688331e1f&imgtype=0&src=http%3A%2F%2Fa3.att.hudong.com%2F14%2F75%2F01300000164186121366756803686.jpg',
				imgSrc: null,
				//二维码路径
				Eqr: 'http://cdn.sdzuhaoxia.com/image/gaoWX.jpg'
			}
		},
		onReady() { //获取系统高度
			let that = this
			try {
				const res = uni.getSystemInfoSync();
				let {
					windowHeight,
					windowWidth
				} = res;
				// console.log(res)
				this.width = windowWidth
				this.height = windowHeight
			} catch (e) {
				// error
			}
		},
		onLoad: function() {

			
			//生成二维码如果直接有二维码就不用生成
			let teamcode = "我爱你"
			let img = QR.createQrCodeImg(teamcode, {
				size: parseInt(300), //二维码大小 默认是500
				typeNumber: parseInt(4) //二维码的复杂程度
			})
			//生成我爱你的二维码赋值给Eqr使用QR生成的是base64格式图片
			this.Eqr = img
			//将base64格式图片转本地的方法如果直接就jpg之类格式的图片不用转换		
			this.getQRBase64(this.Eqr)
			//将图片变成base64格式
			//this.ToQRBase64(this.Eqr)
			//生成二维码到这里结束如果直接有可以吧上面删掉


			// 画布初始化
			this.context = uni.createCanvasContext('graceCanvas');
			this.initSize();
			//等待画布创建
			uni.showLoading({
				title: '海报生成中'
			});
			//延迟1秒等待画布创建
			setTimeout(() => {
				this.draw();
			}, 1000);
		},

		methods: {
			//将图片变成base64格式
			ToQRBase64(img){
				pathToBase64(img).then(path => {
					// console.log(path)							
				}).catch(error => {
					console.error(error)
				})
			},
			//将bats64转换为本地图片
			getQRBase64(Eqr) {
				let imageStr = Eqr
				base64ToPath(imageStr).then(path => {
						this.Eqr = path
			
					}).catch(error => {
					console.error(error)
				})
			},
			// 画布初始化
			initSize: function() {
				this.widthIn = uni.upx2px(this.width);
				this.heightIn = uni.upx2px(this.height);
			},
			// 海报绘制代码
			draw: function() {
				// 步骤 01. 绘制背景颜色
				this.step01();
				// 步骤 02. 绘制背景图片（如果需要，条件结构）
				if (this.bgImg != '') {
					this.drawBGIMG(this.bgImg, () => {
						// 步骤 03
						this.step03();
					});
				} else {
					this.step03();
				}
			},
			// 步骤 01 : 绘制背景颜色
			step01: function() {
				this.context.setFillStyle(this.bgColor);
				this.context.fillRect(0, 0, this.widthIn, this.heightIn);
			},
			// 步骤 03 : 
			// 3.1 绘制标题 [ 居中对应 x = 画布的一半 ]
			// 3.2 绘制验证码
			step03: function() {
				// 3.1 绘制标题 [ 居中对应 x = 画布的一半 ]
				// this.drawText('玉泉洼商城推荐二维码 长按图片保存 ~', this.widthIn / 2, this.heightIn - 12, '#333333', 16, 'center');
				// 3.2 绘制二维码

				// 绘制二维码
				// x = (画布宽度 - 图片宽度 ) / 2
				var qrCodeWidth = 180;
				var x = (this.widthIn - qrCodeWidth) / 2;
				//绘制二维码后面的白色背景
				this.context.setFillStyle('white')
				this.context.fillRect(x - 8, 260 - 8, qrCodeWidth + 16, qrCodeWidth + 16)
				this.context.drawImage(this.Eqr, x, 260, qrCodeWidth, qrCodeWidth);
				// console.log(this.Eqr)
				// 3.3 二维码下面的小字描述 
				this.drawText('二维码 长按图片保存 ~ ', this.widthIn / 2, 468, '#FFFFFF', 12, 'center');
				// 在最后一步执行 drawIt 完整最终的绘制
				uni.hideLoading()

				this.drawIt();

			},
			// 绘制文本, 参数 : 文本内容,x,y,颜色,文本大小,横向对齐方式
			drawText: function(content, x, y, color, size, align) {
				this.context.setFontSize(size);
				this.context.setFillStyle(color);
				this.context.setTextAlign(align);
				this.context.fillText(content, x, y);
			},
			// 最终绘制函数
			drawIt: function() {
				this.context.draw(true, () => {
					uni.canvasToTempFilePath({
						x: 0,
						y: 0,
						width: this.widthIn,
						height: this.heightIn,
						destWidth: this.widthIn,
						destHeight: this.heightIn,
						canvasId: 'graceCanvas',
						success: (res) => {
							// 在H5平台下，tempFilePath 为 base64
							// console.log(res)
							this.imgSrc = res.tempFilePath;
						}
					});
				});
			},
			// 绘制图片,参数 : 图片地址, 绘制完成后执行的回调函数
			drawBGIMG: function(img, callback) {

				// 绘制
				uni.getImageInfo({
					src: img,
					success: (res2) => {
						var bgImgHeight = res2.height / 2;
						// console.log(bgImgHeight);
						//绘制半屏幕获取图片的高度将其绘制过去
						//this.context.drawImage(res2.path, 0, 0, this.widthIn, bgImgHeight);
						//绘制整屏可能会将图片拉伸
						this.context.drawImage(res2.path, 0, 0, this.width, this.height);
						callback();
					},
					fail: (err) => {
						console.log(err)
					}
				});



			},
			// 长按事件
			longpress: function() {
				console.log('ok');
				uni.saveImageToPhotosAlbum({
					filePath: this.imgSrc,
					success: () => {
						console.log('save success');
						uni.showToast({
							title: "图片已经保存到您的相册~"
						})
					}
				});
			}
		}
	}
</script>
<style>
	page {
		background-color: #cbeed4;
	}

	.canvas-box {
		width: 100%;
		height: 100%;
		display: block;
		position: relative;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
	}

	.canvas-in {
		width: 100%;
		position: relative;
	}

	.grace-canvas {}

	.grace-canvas-img {
		position: absolute;
	
		z-index: 99;
		left: 0;
		top: 0;
		font-size: 0;
	}

	.tswz {
		position: fixed;
		bottom: 30rpx;
		width: 100%;
		text-align: center;
		display: block;
		left: 0;
		font-size: 34rpx;
		color: #333333;
		z-index: 999;
	}
</style>
